import Headroom from 'headroom.js';
import { ref, Ref } from 'vue';

const useHeadroom = (): Ref<any> => {
  const headroomRef = ref<any>(null);

  /**
   * 智能显示隐藏导航栏:
   * http://www.ilxtx.com/auto-hide-navbar.html
   * https://boke112.com/post/3476.html
   * [cdn](https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js)
   */
  const oHeader = document.querySelector('#nav-headroom-scroll');
  if (!oHeader) return headroomRef;

  headroomRef.value = new Headroom(oHeader, {
    // 在元素没有固定之前，垂直方向的偏移量（以px为单位）-- 往下滚205px才会触发
    offset: 205,
    // scroll tolerance in px before state changes
    tolerance: 5,
    classes: {
      // 当元素初始化后所设置的class
      initial: 'headroom-animated',
      // 向上滚动时设置的class ["slideDown", "swingInX", "flipInX", "bounceInDown"]
      pinned: 'slideDown',
      // 向下滚动时所设置的class ["slideUp", "swingOutX", "flipOutX", "bounceOutUp"]
      unpinned: 'slideUp',
    },
  });

  return headroomRef;
};

export default useHeadroom;
